<template>
  <basic-container>
    <div id="rolemanagement">
      <h3>角色管理</h3>
      <div class="empower_box">
        <div class="empower_list">
          <avue-crud
            :data="data"
            :option="option"
            @row-save="rowSave"
            @row-del="rowDel"
            @current-row-change="handleCurrentRowChange"
          ></avue-crud>
        </div>
        <div class="empower_option">
          <div>
            <el-button type="primary" @click="authorize">授权</el-button>
          </div>
          权限选择：
          <avue-crud
            ref="jurisdiction"
            :rowKey="jurisdiction"
            :data="jurisdictionData"
            :option="jurisdictionOption"
            @selection-change="selectionChange"
          ></avue-crud>
        </div>
        <div class="shop">
          店铺选择：
          <avue-crud
            ref="crud"
            :data="shopname"
            :option="shopnameOption"
            @selection-change="shopselectionChange"
          >
          </avue-crud>
        </div>
      </div>
    </div>
  </basic-container>
</template>

<script>
import $ from "jquery";
// let baseUrl = "http://192.168.0.220:8091";
let baseUrl = "http://122.51.69.142:8091"; //服务器地址
export default {
  data() {
    return {
      data: [],
      option: {
        page: false,
        addBtn: true,
        addRowBtn: false,
        editBtn: false,
        highlightCurrentRow: true,
        align: "center",
        menuAlign: "center",
        dialogClickModal: false,
        column: [
          {
            label: "角色编号",
            prop: "roleId",
            editDetail: true,
            addDisabled: true,
          },
          {
            label: "角色名称（英文）",
            prop: "roleName",
            hide: true,
          },
          {
            label: "角色描述",
            prop: "description",
          },
          {
            label: "权限",
            prop: "label",
            type: "select",
            multiple: true,
            dicUrl: `${baseUrl}/pc/getMenuList`,
            props: {
              label: "label",
              value: "menuId",
            },
            hide: true,
            rules: [
              {
                required: true,
                message: "请选择权限",
                trigger: "blur",
              },
            ],
          },
          {
            label: "店铺名称",
            prop: "shopIdList",
            type: "select",
            multiple: true,
            dicUrl: `${baseUrl}/pc/getShopList`,
            props: {
              label: "name",
              value: "shopId",
            },
            hide: true,
            rules: [
              {
                required: true,
                message: "请选择店铺",
                trigger: "blur",
              },
            ],
          },
          {
            label: "创建时间",
            prop: "createdOn",
            editDetail: true,
            addDisabled: true,
          },
        ],
      },
      shopname: [], //店铺选项
      shopnamevalue: [], //店铺选中
      jurisdiction: [], //权限选中
      jurisdictionData: [], //权限选项
      shopnameOption: {
        selection: true,
        reserveSelection: true,
        addBtn: false,
        align: "center",
        menuAlign: "center",
        page: false,
        menu: false,
        dialogClickModal: false,
        column: [
          {
            label: "店铺名称",
            prop: "shopId",
            type: "select",
            dicUrl: `${baseUrl}/pc/getShopList`,
            props: {
              label: "name",
              value: "shopId",
            },
          },
        ],
      },
      jurisdictionOption: {
        selection: true,
        reserveSelection: true,
        addBtn: false,
        align: "center",
        menuAlign: "center",
        page: false,
        menu: false,
        dialogClickModal: false,
        column: [
          {
            label: "权限",
            prop: "label",
            type: "select",
            // // dicUrl: `${baseUrl}/pc/getPermissionsList`,
            // dicUrl: `${baseUrl}/pc/getMenuList`,
            // props: {
            // 	label: "label",
            // 	value: "menuId",
            // },
          },
        ],
      },
      list: {},
    };
  },
  mounted() {
    this.getDataList();
    this.shop();
  },
  methods: {
    // 进入页面加载
    getDataList() {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/getPcUserRoleList`)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            $(".el-pagination").css("display", "inline-block");
            _this.data = resData.data;
          } else {
            _this.data = [];
            $(".el-pagination").css("display", "none");
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
      // 获取权限数据
      _this.$ajax
        .post(`${baseUrl}/pc/getMenuList`)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            _this.jurisdictionData = resData.data;
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 获取店铺名称
    shop() {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/getShopList`)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            _this.shopname = resData.data;
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 分页
    // onLoad(page) {
    //   this.page.pageNum = page.currentPage; //页数
    //   this.page.pageSize = page.pageSize; //条数
    //   this.getDataList();
    // },
    // 权限选中数据
    selectionChange(list) {
      if (this.jurisdiction.length != list.length) {
        this.jurisdiction = [];
        list.forEach((item) => {
          this.jurisdiction.push(item.menuId);
        });
      } else {
        list.forEach((item) => {
          this.jurisdiction.push(item.menuId);
        });
      }
    },
    // 店铺选中数据
    shopselectionChange(list) {
      if (this.shopnamevalue.length != list.length) {
        this.shopnamevalue = [];
        list.forEach((item) => {
          this.shopnamevalue.push(item.shopId);
        });
      } else {
        list.forEach((item) => {
          this.shopnamevalue.push(item.shopId);
        });
      }
    },
    // 新增
    rowSave(form, done) {   
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/updateRole`, {
          action: 1,
          roleName: form.roleName,
          description: form.description,
          menuIdList: form.label,
          shopIdList: form.shopIdList,
        })
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            _this.$message.success("新增成功");
            _this.getDataList();
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
      done();
    },
    // 删除按钮
    rowDel(row) {
      let _this = this;
      _this
        .$confirm(
          "删除该角色，就删除该角色的所有用户信息，是否继续？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
        .then(() => {
          _this.$ajax
            .post(`${baseUrl}/pc/updateRole`, {
              action: 3,
              roleId: row.roleId,
            })
            .then(function (res) {
              //请求成功
              console.log(res);

              let resData = res.data;
              if (resData.code == 200) {
                _this.$message.success("删除成功");
                _this.getDataList();
              } else {
                _this.$message.error(resData.msg);
              }
            })
            .catch(function (error) {
              //请求失败
              console.log(error);
            });
        });
    },
    // 单击选中
    handleCurrentRowChange(val) {
      let _this = this;
      _this.$refs.jurisdiction.toggleSelection();
      _this.$refs.crud.toggleSelection();
      _this.list = val;
      _this.$ajax
        .post(`${baseUrl}/pc/getRolePowerList`, {
          roleId: _this.list.roleId,
        })
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            for (let i = 0; i < resData.data.menuList.length; i++) {
              for (let j = 0; j < _this.jurisdictionData.length; j++) {
                if (
                  resData.data.menuList[i].id == _this.jurisdictionData[j].id
                ) {
                  _this.$refs.jurisdiction.toggleSelection([
                    _this.jurisdictionData[j],
                  ]);
                }
              }
            }
            for (let i = 0; i < resData.data.shopList.length; i++) {
              for (let j = 0; j < _this.shopname.length; j++) {
                if (resData.data.shopList[i].id == _this.shopname[j].id) {
                  _this.$refs.crud.toggleSelection([_this.shopname[j]]);
                }
              }
            }
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 授权
    authorize() {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/updateRole`, {
          action: 2,
          roleId: _this.list.roleId,
          roleName: _this.list.roleName,
          description: _this.list.description,
          menuIdList: _this.jurisdiction,
          shopIdList: _this.shopnamevalue,
        })
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            _this.$message.success("授权成功");
            _this.jurisdiction = [];
            _this.shopnamevalue = [];
            _this.$refs.jurisdiction.toggleSelection();
            _this.$refs.crud.toggleSelection();
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
  },
};
</script>

<style>
#rolemanagement h3 {
  margin: 20px 0;
}

.search {
  margin: 10px 0;
}

.search .el-select {
  margin-right: 10px;
  margin-bottom: 10px;
}

.empower_box {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.empower_option,
.shop {
  width: 25vw;
}

.shop {
  padding-top: 4vh;
}
</style>
